
<script setup lang="ts">
import { useSound } from '@vueuse/sound'
import errorAnswerSfx from '@/assets/sound/error_answer.mp3'

const { play } = useSound(errorAnswerSfx)

const appStore = useAppStore()

document.onclick = () => {
  play()
  // appStore.setGlobalTip('error_answer')
}
onBeforeRouteUpdate(() => {
  appStore.setLayoutTip('')
})
</script>

<template>
  <main class="h-full flex flex-col">
    <div class="flex-1 flex flex-col">
      <div v-if="appStore.layoutTip" class=" p-x-1.5em p-y-1em " style="position: absolute;top: 3em;width: 100%;z-index: 99;">
        <div class="bg-#fff tip-border text-#BC6B00 p-x-0.5em p-y-5px text-lg text-center">
          {{ appStore.layoutTip }}
        </div>
      </div>
      <router-view />
    </div>
  </main>
</template>

<style scoped lang="scss">
.tip-border{
  position: relative;
  border-radius: 4px;

  &::after{
    position: absolute;
    top:-5px;
    left: -10px;
    width: 80px;
    height: 15px;
    content: '';
    background-image: url("@/assets/guide/left_top_mark.png");
    background-size: 100% 100%;
  }

  &::before{
    position: absolute;
    right: -10px;
    bottom:-5px;
    width: 50px;
    height: 15px;
    content: '';
    background-image: url("@/assets/guide/right_bottom_mark.png");
    background-size: 100% 100%;
  }
}
</style>
